<template>
  <a-drawer
    :title="drawerTitle"
    :width="800"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <div class="table_con">
      <div class="table_column" v-if="showBill">
        <div class="column_list" style="width: 40%">账单编号</div>
        <div class="column_list">开始时间</div>
        <div class="column_list">结束时间</div>
        <div class="column_list">账单金额</div>
      </div>
      <div class="table_list" v-for="(value, key) in generateBills" :key="key">
        <template v-if="value.roomInfo">
          <div class="table_header" v-if="bindObject == 1">
            房间名称：{{ value.roomInfo.room[0].room_name }}
            <a-divider type="vertical" style="border-color: #7cb305" dashed />
            楼层：{{ value.roomInfo.room[0].layer_name }}
            <a-divider type="vertical" style="border-color: #7cb305" dashed />
            楼栋：{{ value.roomInfo.build.build_name }}
          </div>
          <div
            class="table_header"
            v-if="bindObject == 2 && value.roomInfo.parkSpace"
          >
            <span v-if="value.roomInfo.parkSpace.park_name"
              >车场：{{ value.roomInfo.parkSpace.park_name }}</span
            >
            <a-divider
              v-if="value.roomInfo.parkSpace.space_name"
              type="vertical"
              style="border-color: #7cb305"
              dashed
            />
            <span v-if="value.roomInfo.parkSpace.space_name"
              >车位：{{ value.roomInfo.parkSpace.space_name }}</span
            >
            <a-divider
              v-if="value.roomInfo.parkSpace.space_area"
              type="vertical"
              style="border-color: #7cb305"
              dashed
            />
            <span v-if="value.roomInfo.parkSpace.space_area"
              >面积：{{ value.roomInfo.parkSpace.space_area }} ㎡</span
            >
            <a-divider
              v-if="value.roomInfo.user_name"
              type="vertical"
              style="border-color: #7cb305"
              dashed
            />
            <span v-if="value.roomInfo.parkSpace.user_name"
              >姓名：{{ value.roomInfo.parkSpace.user_name }}</span
            >
          </div>
          <template v-if="showBill">
            <div
              class="room_list"
              v-for="(bill_value, bill_key) in value.bills"
              :key="bill_key"
            >
              <a
                style="color: #18f; width: 40%"
                @click="goDetail(bill_value.bill_id)"
                class="room_value"
              >{{ bill_value.bill_number }}</a
              >
              <div class="room_value">{{ bill_value.start_date }}</div>
              <div class="room_value">{{ bill_value.end_date }}</div>
              <div class="room_value">{{ bill_value.bill_amount }}</div>
            </div>
          </template>
        </template>
      </div>
    </div>
    <BillDetailDrawer
      :visible="detailVisible"
      :id="billId"
      @cancel="closeDetail"
    />
  </a-drawer>
</template>

<script>
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, watch, toRefs } from "vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import BillDetailDrawer from "../../BillDetail/modules/BillDetailDrawer.vue";
export default defineComponent({
  emits: ["close"],
  components: {
    BillDetailDrawer,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showBill: {
      type: Boolean,
      default: true,
    },
    bindObject: {
      type: [String, Number],
      default: 0,
    }
  },
  setup(props, context) {
    const state = reactive({
      drawerTitle: "绑定房间列表",
      billId: null,
      detailVisible: false,
      tableLoading: false,
      generateBills: {},
    });

    const onClose = () => {
      state.generateBills = {};
      context.emit("close");
    };

    const getTableList = () => {
      request
        .get("/org", "/standard/charge/bind/detail", { id: props.orderInfo.id })
        .then((res) => {
          state.generateBills = res.result.generate_bills;
          state.tableLoading = false;
        })
        .catch((err) => {
          state.tableLoading = false;
        });
    };

    const goDetail = (bill_id) => {
      state.detailVisible = true;
      state.billId = bill_id;
    };

    const closeDetail = () => {
      state.detailVisible = false;
      state.billId = null;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val && props.orderInfo.id) {
          getTableList();
        }

        if (val && props.bindObject) {
          if (props.bindObject == 1) {
            state.drawerTitle = "绑定房间列表";
          } else {
            state.drawerTitle = "绑定车位列表";
          }
        }
      }
    );

    return {
      onClose,
      goDetail,
      closeDetail,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.table_con {
  .table_column {
    display: flex;
    width: 100%;
    background: #fafafa;
    .column_list {
      width: 20%;
      padding: 12px 20px;
      border: 1px solid #eee;
      color: #333;
    }
  }

  .table_list {
    .table_header {
      padding: 12px 20px;
      font-weight: 600;
      border: 1px solid #eee;
      &:hover {
        background: #e6f7ff;
      }
    }
    .room_list {
      display: flex;
      width: 100%;
      &:hover {
        background: #e6f7ff;
      }
      .room_value {
        width: 20%;
        padding: 12px 20px;
        border: 1px solid #eee;
        color: #333;
      }
    }
  }
}
</style>
